<template>
	<view class="container" :style="{
		background: `linear-gradient(110deg, ${colorL} ${percentage * 80 + 10}%, ${colorR} ${percentage * 80 + 10}%)`,
		height: height,
		borderRadius: `calc(${height} / 3)`,
		}">
		<view :style="{ width: `${percentage * 80 + 10}%`, color: textColorL }">{{ textL }}</view>
		<view :style="{ width: `${100 - (percentage * 80 + 10)}%`, color: textColorR }">{{ textR }}</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: {
				type: String,
				default: '20px'
			},
			percentage: {
				type: Number,
				default: 0.5
			},
			colorL: {
				type: String,
				default: '#4af'
			},
			colorR: {
				type: String,
				default: '#fa4'
			},
			textL: {
				type: String,
				default: ''
			},
			textR: {
				type: String,
				default: ''
			},
			textColorL: {
				type: String,
				default: 'white'
			},
			textColorR: {
				type: String,
				default: 'white'
			},
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.container>view {
		text-align: center;
	}
</style>